<template>
    <el-drawer
        ref="drawerRef"
        v-model="model"
        :close-on-click-modal="false"
        :before-close="handleBeforeClose"
        v-bind="drawerBind()"
    >
        <template #header>
            <BaseRender v-if="typeof header === `function`" :render="header"></BaseRender>
            <slot name="header" v-else>
                <div>{{ header }}</div>
            </slot>
        </template>
        <template #default>
            <BaseRender v-if="typeof content === `function`" :render="content"></BaseRender>
            <slot name="default" v-else></slot>
        </template>
        <template #footer>
            <BaseRender v-if="typeof footer === `function`" :render="footer"></BaseRender>
            <slot name="footer" v-else>
                <span class="drawer-footer">
                    <el-button @click="onCancel()">取消</el-button>
                    <el-button type="primary" @click="onConfirm()" :loading="confirmLoading">确定</el-button>
                </span>
            </slot>
        </template>
    </el-drawer>
</template>

<script setup>
import { computed, ref, useAttrs } from 'vue'
import BaseRender from './BaseRender.vue'

defineOptions({
    name: 'Basedrawer',
    inheritAttrs: false
})

const drawerRef = ref(null)

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    'onUpdate:modelValue': {
        type: Function,
        default: () => {}
    },
    header: {
        type: [String, Function]
    },
    content: {
        type: [String, Function]
    },
    footer: {
        type: [String, Function]
    },
    confirmLoading: {
        type: Boolean
    },
    onConfirm: {
        type: Function,
        default: () => {}
    },
    onCancel: {
        type: Function,
        default: () => {}
    }
})

const model = computed({
    get () {
        return props.modelValue
    },
    set (val) {
        props['onUpdate:modelValue'](val)
    }
})

const attrs = useAttrs()

const drawerBind = () => {
    const { title, ...args } = attrs
    return args
}

const handleBeforeClose = done => {
    done()
    props.onCancel()
}

defineExpose({
    drawerRef
})
</script>

<style lang="scss" scoped></style>